<template>
  <div class="index">
    <div class="header">大病保险经办扩展系统</div>
    <div class="index-content">
      <div class="menu">

        <el-menu default-active="2" @open="handleOpen" @close="handleClose" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>系统管理</span>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>项目定义</span>
            </template>
            <el-menu-item index="2-1">项目定义承包后台表</el-menu-item>
            <el-menu-item index="2-2">机构及用户权限</el-menu-item>
            <el-menu-item index="/coordinating_maintain/maintain">统筹区维护</el-menu-item>
            <el-menu-item index="/project_definition/project_info">项目信息</el-menu-item>
            <el-menu-item index="2-5">项目财务信息</el-menu-item>
            <el-menu-item index="2-6">保单模板管理</el-menu-item>
            <el-menu-item index="2-7">本地化社保维护</el-menu-item>
            <el-menu-item index="2-8">导入模板维护</el-menu-item>
            <el-menu-item index="2-9">社保组合定义</el-menu-item>
            <el-menu-item index="2-10">商保社保映射关系</el-menu-item>
            <el-menu-item index="2-11">理赔模板与社保组合关系维护</el-menu-item>
          </el-submenu>
          <el-menu-item index="/user">
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="router-view">
        <el-card shadow="always" style="margin-top:10px;">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="/">活动管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>{{routerTitle}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>

        <router-view />
      </div>
    </div>
  </div>
</template>


<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";

    @Component({
        name: "index",
        components: {}
    })
    export default class Index extends Vue {
        handleOpen(key: string, keyPath: string) {
            console.log(key, keyPath);
        }
        handleClose(key: string, keyPath: string) {
            console.log(key, keyPath);
        }

        get routerTitle() {
            return this.$route.meta.title;
        }
    }
</script>
<style scoped>
  .header {
    height: 60px;
    background: #74cdff;
    text-align: left;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .index-content {
    margin-top: 60px;
  }
  .menu {
    height: 100%;
    float: left;
    width: 280px;
    background: red;
  }
  .router-view {
    margin-left: 300px;
  }
</style>

